<template>
    <div class="content">
        <div class="left">
            <div class="left_top">
                <div>{{ login.name }}</div>
                <div>{{ login.email }}</div>
            </div>
            <div class="left_bottom">
                <div class="item" :class="{ action: item.show }" v-for="( item, index) in $store.state.leftNavList"
                    @click="handleNav(index)">
                    {{ item.name }}
                </div>

                <div class="account" v-if="$store.state.showAccount">
                    <div @click="dialogVisible = true">Log Out</div>
                    <div @click="dialogVisible2 = true">Change Password</div>
                    <div @click="handleDelete">Delete Account</div>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose1">
            <span>Are you sure to log out?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="handleClose">OK</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible2" width="50%" :before-close="handleClose2">
            <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item class="bao_1" label="New Password" prop="password" label-width="120px">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false; ruleForm.password = ''">Cancel</el-button>
                <el-button type="primary" @click="handleChange('ruleForm')">OK</el-button>
            </span>
        </el-dialog>

        <div class="right">
            <!-- <Keep-live> -->
            <router-view />
            <!-- </Keep-live> -->
        </div>
    </div>
</template>

<script>
import { logout, modify_password } from "@/api/login.js"
export default {
    data() {
        let validatePass = (rule, value, callback) => {
            let regx = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*().,。+-><]{6,18}$/;
            if (value === '') {
                callback(new Error('Please enter a password'));
            } else if (value.length < 6) {
                callback(new Error('A minimum of six digits is required'));
            } else if (!regx.test(value)) {
                callback(new Error('Must contain letters, numbers, special characters'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false, // 退出登录提示框
            dialogVisible2: false, // 修改密码提示框
            ruleForm: {
                password: '', // 新密码
            },
            rules: {
                password: [
                    { required: true, validator: validatePass, trigger: 'blur' },
                ]
            },
            login: JSON.parse(localStorage.getItem('login')) || null
        }
    },
    methods: {
        // 切换导航
        handleNav(index) {
            this.$store.commit('handleUserAcc', { index, router: this.$router })
        },
        // 确定退出
        handleClose() {
            this.dialogVisible = false
            // const { email } = this.$store.state.loginSucInfo || {}
            let login = JSON.parse(localStorage.getItem('login')) || null;
            const { email } = login
            logout({ email }).then(res => {
                const { code } = res || {}
                if (code == 200) {
                    this.$router.push({ path: '/login' })
                    this.$message.success('Exit successful');
                    this.$store.commit('handleLogout', false)
                    localStorage.removeItem('login')
                    localStorage.clear()
                }

                // console.log('确定', res)
            })
        },
        // 退出登录 XX 关闭弹出框
        handleClose1() {
            this.dialogVisible = false
        },

        // 修改密码
        handleChange(formName) {
            let login = JSON.parse(localStorage.getItem('login')) || null;
            const { email } = login
            const { password } = this.ruleForm || {}
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    modify_password({
                        email,
                        password
                    }).then(res => {
                        const { code } = res || {}
                        if(code == 200) {
                            this.$message.success('The password was changed successfully')
                            this.$router.push({path: '/login'})
                        }
                    }).catch(err => {console.log('err', err)})
                    this.ruleForm.password = '';
                } else {
                    return false;
                }
            });
        },
        // 退出登录 XX 关闭弹出框
        handleClose2() {
            this.dialogVisible2 = false
            this.ruleForm.password = ''
        },
        handleDelete() {
            console.log('注销账户')
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    display: flex;
    padding: 15px;

    .left {
        width: 20%;
        height: 100%;
        // background-color: skyblue;

        .left_top {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border-radius: 10px;
            height: 50px;
            color: #fff;
            background-color: #b9aed2;
            margin-bottom: 20px;
            padding: 20px;

            div:nth-child(1) {
                font-size: 20px;
                white-space: nowrap;
            }

            div:nth-child(2) {
                margin-top: 5px;
                font-size: 14px;
                white-space: nowrap;
            }

        }

        .left_bottom {
            margin-top: 10px;
            height: 450px;
            border: 1px solid #d3cce2;
            border-radius: 20px;
            padding: 20px 5px;
            position: relative;

            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 8px;
                height: 50px;
                cursor: pointer;
                white-space: nowrap;
            }

            .action {
                background-color: #b8aed1;
                color: #fff;
            }

            .account {
                display: flex;
                align-items: center;
                flex-direction: column;
                width: 100%;
                position: absolute;
                color: #989898;
                bottom: 40px;

                div {
                    margin: 5px 0px;
                    padding-bottom: 2px;
                    cursor: pointer;
                    border-bottom: 1px solid #989898;
                }
            }
        }
    }

    .right {
        width: 80%;
        // height: 100%;
        // background-color: aqua;
        border: 1px solid #c6bcda;
        margin-left: 10px;
        padding: 20px 10px;
    }

    .bao_1 {
        white-space: nowrap;
    }
}
</style>
